<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2023-07-07 15:22:36
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-08-20 11:18:03
 * @FilePath: \jzjypc4.2\src\views\DashBoard\dingzhi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="all">
      <div class="banner">
        <el-carousel :height="bannerHeight + 'px'">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 左侧悬浮栏 -->
      <div class="caidan" v-show="baoType != 2 || type == 'xx'">
        <div class="floatingLeft">
          <ul>
            <li
              @click="goToAnchor('#week' + (index + 1), index + 1)"
              :class="{ choseLi: leftValue == index + 1 }"
              v-for="(item, index) in weekList"
              :key="index"
            >
              <!-- <img
              src="../../assets/img/dingzhi_tips5.png"
              v-if="!weekList.find((item) => item.title == '第一周')"
            /> -->
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 服务包切换和分期内容 -->
      <div class="baoTaps" v-if="type == 'dy'">
        <div class="left">
          <div class="baoBanner">
            <img :src="baoPic" alt="">
            <!-- <el-carousel trigger="click" :indicator-position="none" :autoplay="false" ref="carousel">
              <el-carousel-item
                v-for="(item, index) in goodsTypeList.slice(3, 4)"
                :key="index"
                :name="item.id + ''"
              >
                <img :src="item.file_url_pc" alt="banner图" />
              </el-carousel-item>
            </el-carousel> -->
          </div>
        </div>
        <div class="right">
          <h4>{{ goodsTitle }}</h4>
          <div class="nianji">
            <p>适用年级</p>
            <div class="list">
              <span @click="changeNj(9)" :class="{ chosedNj: nianji_id == 9 }"
                >高一年级</span
              >
              <span @click="changeNj(10)" :class="{ chosedNj: nianji_id == 10 }"
                >高二年级</span
              >
              <span @click="changeNj(11)" :class="{ chosedNj: nianji_id == 11 }"
                >高三年级</span
              >
            </div>
          </div>
          <div class="buyType">
            <p>整包购买</p>
            <div class="list">
              <!-- <span @click="chodeAll" :class="{choseBuyType:isContained(choseQiArr,allQiArr)}">全学年（共{{tc_goodsweek_lists.length}}期  ￥{{price}}）</span> -->
              <span @click="chodeAll" :class="{ choseBuyType: payType == 1 }"
                >全学年（共{{ all_week_num }}期 ￥{{ price }}）</span
              >
              <!-- <span
                @click="chodeshang"
                :class="{
                  choseBuyType:
                    isContained(choseQiArr, nopaytop) && nopaytop.length != 0,
                }"
                v-if="baoTypeId == 1 && nopaytop.length != 0 && gopay == 1"
                >上学期（共{{ topXq }}期 ￥{{ topXqPrice }}）</span
              >
              <span
                style="cursor: not-allowed !important"
                v-if="baoTypeId == 1 && nopaytop.length == 0 && gopay == 1"
                >上学期（共{{ topXq }}期 ￥{{ topXqPrice }}）</span
              >
              <span
                @click="chodexia"
                :class="{
                  choseBuyType:
                    isContained(choseQiArr, nopaydown) && nopaydown.length != 0,
                }"
                v-if="baoTypeId == 1 && nopaydown.length != 0 && gopay == 1"
                >下学期（共{{ downXq }}期 ￥{{ downXqPrice }}）</span
              >
              <span
                style="cursor: not-allowed !important"
                v-if="baoTypeId == 1 && nopaydown.length == 0 && gopay == 1"
                >下学期（共{{ downXq }}期 ￥{{ downXqPrice }}）</span
              > -->
            </div>
          </div>
          <div class="fenqiBuy" v-if="baoTypeId == 1 && gopay == 1 && false">
            <p>分期购买</p>
            <div class="list">
              <span
                :class="{
                  canchose: item.is_pay == 1,
                  choseBuyType:
                    choseQiArr.indexOf(item.id) != -1 && item.is_pay != 1,
                }"
                @click="choseQi(item)"
                v-for="item in fenqiLists"
                :key="item.id"
                >{{ item.yf_title }}{{ item.title }} ￥{{ item.price }}</span
              >
            </div>
          </div>
          <div class="chosedPrice" v-if="gopay == 1">
            <p>已选择</p>
            <div class="price">
              <p>￥</p>
              <h3>{{ true_price }}</h3>
              <!-- <h3 v-if="isContained(choseQiArr,allQiArr) || isContained(choseQiArr,nopaytop)  || isContained(choseQiArr,nopaydown)">{{true_price}}</h3> -->
              <!-- <h3 v-if="!isContained(choseQiArr,nopaytop) && !isContained(choseQiArr,allQiArr) && !isContained(choseQiArr,nopaydown)">{{fenqiPrice}}</h3> -->
              <!-- <h3 v-if="payType == 1">{{all_residue_price}}</h3>
              <h3 v-if="payType == 2">{{up_residue_price}}</h3>
              <h3 v-if="payType == 3">{{down_residue_price}}</h3> -->
            </div>
          </div>
          <div class="buyIt" v-if="gopay == 1">
            <div
              class="goBuy"
              v-if="
                is_pay == 1 ||
                (payType == 2 && nopaytop.length == 0) ||
                (payType == 3 && nopaydown.length == 0)
              "
            >
              已支付
            </div>
            <div class="goBuy" v-else @click="dialogTableVisible = true">立即购买</div>
            <!-- <div class="goBuy" @click="$throttle(payIt)">立即购买</div> -->
            <div class="zx" @click="zixun">
              <img src="../../assets/img/ffzyb/kefu.png" alt="" />
              <span>咨询</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="plans" v-show="baoType != 2 || type == 'xx'">
          <div class="planLeft">
            <div class="top">
              <img src="../../assets/img/dingzhi_tips2.png" alt="" />
              <h3>上学期资源包</h3>
            </div>
            <div class="monthLists">
              <span class="duan" style="width: 100%"></span>
              <div
                class="month"
                v-for="(item, index) in firstLists"
                :key="index"
              >
                <div class="num" @click="chosedMonth(item)">
                  <img
                    src="../../assets/img/dingzhi_tips3.png"
                    v-show="nowMonth == item.title || choseMonth == item.title"
                  />
                  <img
                    src="../../assets/img/dingzhi_tips11.png"
                    v-show="
                      monthList.indexOf(item.title) != -1 &&
                      nowMonth != item.title &&
                      choseMonth != item.title &&
                      item.id &&
                      item.goodsweek_lists.length > 0 &&
                      ((new Date().getTime() > item.start_time * 1000 &&
                        type == 'xx') ||
                        type == 'dy')
                    "
                  />
                  <img
                    src="../../assets/img/dingzhi_tips10.png"
                    v-show="
                      (monthList.indexOf(item.title) == -1 &&
                        nowMonth != item.title &&
                        choseMonth != item.title) ||
                      !item.id ||
                      item.goodsweek_lists.length == 0 ||
                      (new Date().getTime() < item.start_time * 1000 &&
                        type == 'xx')
                    "
                  />
                  <p
                    v-show="nowMonth == item.title || choseMonth == item.title"
                    style="color: #fff; font-weight: bold"
                  >
                    {{ item.title }}
                  </p>
                  <p
                    v-show="
                      monthList.indexOf(item.title) != -1 &&
                      nowMonth != item.title &&
                      choseMonth != item.title &&
                      item.id &&
                      item.goodsweek_lists.length > 0 &&
                      ((new Date().getTime() > item.start_time * 1000 &&
                        type == 'xx') ||
                        type == 'dy')
                    "
                    style="color: #08a579"
                  >
                    {{ item.title }}
                  </p>
                  <p
                    v-show="
                      (monthList.indexOf(item.title) == -1 &&
                        nowMonth != item.title &&
                        choseMonth != item.title) ||
                      !item.id ||
                      item.goodsweek_lists.length == 0 ||
                      (new Date().getTime() < item.start_time * 1000 &&
                        type == 'xx')
                    "
                    style="color: #969799"
                  >
                    {{ item.title }}
                  </p>
                </div>
                <!-- <span class="chang"></span> -->
                <div class="tips" v-show="item.goodsweek_lists.length == 0">
                  资源上传中
                </div>
              </div>
              <!-- <span class="duan"></span> -->
            </div>
          </div>
          <div class="planRight">
            <div class="top">
              <img src="../../assets/img/dingzhi_tips1.png" />
              <h3>下学期资源包</h3>
            </div>
            <div class="monthLists">
              <span class="duan"></span>
              <div class="month" v-for="item in afterLists" :key="item.id">
                <div class="num" @click="chosedMonth(item)">
                  <img
                    src="../../assets/img/dingzhi_tips4.png"
                    v-show="item.title == nowMonth || choseMonth == item.title"
                  />
                  <img
                    src="../../assets/img/dingzhi_tips6.png"
                    v-show="
                      monthList.indexOf(item.title) != -1 &&
                      nowMonth != item.title &&
                      choseMonth != item.title &&
                      item.id &&
                      item.goodsweek_lists.length > 0 &&
                      ((new Date().getTime() > item.start_time * 1000 &&
                        type == 'xx') ||
                        type == 'dy')
                    "
                  />
                  <img
                    src="../../assets/img/dingzhi_tips10.png"
                    v-show="
                      (monthList.indexOf(item.title) == -1 &&
                        nowMonth != item.title &&
                        choseMonth != item.title) ||
                      !item.id ||
                      item.goodsweek_lists.length == 0 ||
                      (new Date().getTime() < item.start_time * 1000 &&
                        type == 'xx')
                    "
                  />
                  <p
                    v-show="item.title == nowMonth || choseMonth == item.title"
                    style="color: #fff; font-weight: bold"
                  >
                    {{ item.title }}
                  </p>
                  <p
                    v-show="
                      monthList.indexOf(item.title) != -1 &&
                      nowMonth != item.title &&
                      choseMonth != item.title &&
                      item.id &&
                      item.goodsweek_lists.length > 0 &&
                      ((new Date().getTime() > item.start_time * 1000 &&
                        type == 'xx') ||
                        type == 'dy')
                    "
                    style="color: #f67425"
                  >
                    {{ item.title }}
                  </p>
                  <p
                    v-show="
                      (monthList.indexOf(item.title) == -1 &&
                        nowMonth != item.title &&
                        choseMonth != item.title) ||
                      !item.id ||
                      item.goodsweek_lists.length == 0 ||
                      (new Date().getTime() < item.start_time * 1000 &&
                        type == 'xx')
                    "
                    style="color: #969799"
                  >
                    {{ item.title }}
                  </p>
                </div>
                <!-- <span class="chang"></span> -->
                <div class="tips" v-show="item.goodsweek_lists.length == 0">
                  资源上传中
                </div>
              </div>
              <!-- <span class="duan" style="width: 39px"></span> -->
            </div>
          </div>
        </div>
        <div
          class="weekLists"
          :id="'week' + (index + 1)"
          v-for="(item, index) in weekList"
          :key="item.id"
          v-show="baoType != 2 || type == 'xx'"
        >
          <div class="top">
            <h4 v-if="!item.kejianbao_title">【{{ item.title }}资源包】</h4>
            <h4 v-if="item.kejianbao_title">{{ item.kejianbao_title }}</h4>
            <div
              class="do"
              v-if="
                type == 'xx' &&
                item.gm_status == 1 &&
                item.is_pay == 1 &&
                item.kejianbao_id &&
                item.kejianbao_id != 0
              "
              @click="gokejianbao(item.kejianbao_id, item.gm_status)"
            >
              <p>立即查看</p>
            </div>
            <div
              class="do"
              v-if="
                type == 'xx' &&
                item.is_pay != 1 &&
                item.kejianbao_id &&
                item.kejianbao_id != 0
              "
              @click="gokejianbao(item.kejianbao_id, item.gm_status)"
            >
              <p style="background: #ccc; color: #fff">未解锁</p>
            </div>
          </div>
          <div
            v-if="
              item.kejianbao_id &&
              item.kejianbao_id != 0 &&
              new Date().getTime() >= start_time * 1000
            "
          >
            <div
              class="details"
              v-for="(list, index) in item.group_lists3"
              :key="index"
              v-show="list.lists.length != 0"
            >
              <div
                class="left"
                @click="gokejianbao(item.kejianbao_id, item.gm_status)"
              >
                <h4>{{ list.group_title }}</h4>
              </div>
              <div class="right">
                <div
                  class="list"
                  v-for="zy in list.lists"
                  :key="zy.id"
                  @click="gokejianbao(item.kejianbao_id, item.gm_status)"
                >
                  <p>{{ zy.title }}</p>
                </div>
              </div>
            </div>
            <div
              class="details"
              v-for="(list, index) in item.group_lists2"
              :key="index"
              v-show="list.lists.length != 0"
            >
              <div
                class="left"
                @click="gokejianbao(item.kejianbao_id, item.gm_status)"
              >
                <h4>{{ list.group_title }}</h4>
              </div>
              <div class="right">
                <div
                  class="list"
                  v-for="zy in list.lists"
                  :key="zy.id"
                  @click="
                    gokejianbao(item.kejianbao_id, item.gm_status, zy.id, 2)
                  "
                >
                  <p>{{ zy.title }}</p>
                </div>
              </div>
            </div>
            <div
              class="details "
              v-for="list in item.group_lists"
              :key="list.group_title"
              v-show="list.lists.length != 0"
            >
              <div
                class="left"
                @click="gokejianbao(item.kejianbao_id, item.gm_status)"
              >
                <h4>{{ list.group_title }}</h4>
              </div>
              <div class="right">
                <div
                  class="list"
                  v-for="zy in list.lists"
                  :key="zy.id"
                  @click="
                    gokejianbao(item.kejianbao_id, item.gm_status, zy.id, 1)
                  "
                >
                  <p>{{ zy.title }}</p>
                </div>
              </div>
            </div>
            <div
              class="details"
              v-for="list in item.productbook_list"
              :key="list.productbook_id"
              v-show="list.list.length != 0"
            >
              <div
                class="left"
                @click="goproduct(list.productbook_id)"
              >
                <h4>{{ list.productbook_title }}</h4>
              </div>
              <div class="right">
                <div
                  class="list jiaoyan"
                  v-for="zy in list.list"
                  :key="zy.id"
                >
                  <p>{{ zy.pknum }}份{{zy.title}}</p>
                  <p style="margin-right: 30px;" @click="goproduct(list.productbook_id,item.kejianbao_id)">立即查看</p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="details"
            v-show="
              !item.kejianbao_id ||
              item.kejianbao_id == 0 ||
              new Date().getTime() < start_time * 1000
            "
            v-for="list in item.js_lists"
            :key="list.id"
          >
            <div class="left">
              <h4>{{ list.title }}</h4>
            </div>
            <div class="right">
              <div class="list" v-for="sub in list.lists" :key="sub.id">
                <p>{{ sub.title }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="weekLists" v-show="baoType == 2 && type == 'dy'">
          <img :src="pc_detail" alt="" />
        </div>
      </div>
      <div class="fuwu" v-if="type == 'dy'">
        <h2>服务说明</h2>
        <p v-html="ffContents" style="margin-bottom: 20px"></p>
      </div>
      <div class="footerBox" v-if="type == 'dy' && gm_status == 0 && !gopay">
        <div class="footerMsg">
          <div class="left"></div>
          <div class="right" @click="$throttle(dingyue)">
            <p>立即预约</p>
          </div>
        </div>
      </div>
      <div class="footerBox" v-if="type == 'dy' && gm_status == 1 && !gopay">
        <div class="footerMsg">
          <div class="left"></div>
          <div class="right" style="background: #ccc">
            <p>已预约</p>
          </div>
        </div>
      </div>
      <div class="footerBox" v-if="type == 'dy' && is_pay == 0 && gopay == 1">
        <div class="pay">
          <div class="left">
            <div class="price">
              <h2>{{ true_price }}</h2>
              <span v-if="payType != 1"
                >已选择：{{ fondQi(choseQiArr[0]) }}... （共{{
                  choseQiArr.length
                }}期）
              </span>
              <span style="text-decoration: line-through" v-if="payType == 1"
                >原价：￥{{ old_price }}</span
              >
            </div>
            <p>元</p>
            <div class="tips">限时优惠</div>
          </div>
          <div class="right">
            <div class="zx" @click="zixun">
              <img src="../../assets/img/ffzyb/kefu.png" alt="" />
              <span>咨询</span>
            </div>
            <div class="gm" @click="dialogTableVisible = true">立即购买</div>
          </div>
        </div>
      </div>
      <div class="footerBox" v-if="type == 'dy' && is_pay == 1 && gopay == 1">
        <div class="pay">
          <div class="left" style="opacity: 0">
            <div class="price">
              <h2>{{ all_residue_price }}</h2>
              <span>原价：￥{{ old_price }}</span>
            </div>
            <p>元</p>
            <div class="tips">限时优惠</div>
          </div>
          <div class="right">
            <div class="zx" @click="zixun">
              <img src="../../assets/img/ffzyb/kefu.png" alt="" />
              <span>咨询</span>
            </div>
            <div class="gm">已支付</div>
          </div>
        </div>
        <!-- <div class="left">
        </div>
        <div class="right" style="background: #9f9f9f" v-if="is_pay == 1">
          已支付
        </div> -->
      </div>
      <!-- 订阅弹窗 -->
      <div class="dytc">
        <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          width="1000px"
          top="10vh"
        >
          <div class="dySuccess">
            <div class="top">
              <h4>恭喜您，成功完成签约！</h4>
              <div class="jindu">
                <div class="first">
                  <img
                    src="../../assets/img/activeNew/dingdan_jindu3.png"
                    alt=""
                  />
                  <p>订阅资源包</p>
                </div>
                <img
                  src="../../assets/img/activeNew/dingdan_jindu2.png"
                  class="lianjie1"
                />
                <div class="first second">
                  <img
                    src="../../assets/img/activeNew/dingdan_jindu1.png"
                    alt=""
                  />
                  <p>签约完成</p>
                  <p>开始学习，获取发票</p>
                </div>
                <img
                  src="../../assets/img/activeNew/dingdan_jindu2.png"
                  class="lianjie2"
                />
                <div class="first third">
                  <img
                    src="../../assets/img/activeNew/dingdan_jindu3.png"
                    alt=""
                  />
                  <p>完成支付</p>
                  <p>合同签约完成后15日内</p>
                </div>
              </div>
            </div>
            <div class="dyContent">
              <div class="tips">
                <p>您可以在</p>
                <span>个人中心 —— 我的订单</span>中找到该订单，<span
                  class="kaipiao"
                  @click="godingdan"
                  >申请开票<img
                    src="../../assets/img/activeNew/dingdan.png"
                    alt=""
                /></span>
                和完成学习。
                <p>后续付款内容也通过我的订单完成支付即可。</p>
              </div>
              <!-- <div class="pic">
              <img :src="kf_file_url" alt="" />
            </div>
            <p>请您务必添加客服微信，以便后续我们能及时为您推送服务</p> -->
              <div class="ytj" @click="godingdan">订单详情</div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- 付费资源包订阅协议 -->
      <div class="dzxy">
        <el-dialog :visible.sync="fuzybxyShow" width="1000px" top="10vh">
          <div class="xieyi">
            <h3>付费资源包订阅协议</h3>
            <p v-html="ffzyb_xy"></p>
          </div>
        </el-dialog>
      </div>
      <!-- 预约流程进度2 -->
      <div class="yuyue2 yuyue">
        <el-dialog
          :visible.sync="yuyue2Show"
          width="600px"
          top="10vh"
          :before-close="getback"
        >
          <div class="top">
            <img src="../../assets/img/ffzyb/yuyue2.png" alt="" />
          </div>
          <div class="content">
            <div class="title">
              <h4>还差最后一步~<span>添加微信客服</span></h4>
              <h4>就可以收到预约推送啦！</h4>
            </div>
            <div class="pic">
              <img :src="zykf2_file_url" alt="" />
            </div>
            <p>打开微信扫码添加客服</p>
          </div>
        </el-dialog>
      </div>
      <!-- 预约流程进度3 -->
      <div class="yuyue3 yuyue">
        <el-dialog
          :visible.sync="yuyue3Show"
          width="600px"
          top="10vh"
          :before-close="getback"
        >
          <div class="top">
            <img src="../../assets/img/ffzyb/yuyue3.png" alt="" />
          </div>
          <div class="content">
            <img src="../../assets/img/yangshu.png" alt="" />
            <h4>恭喜你，预约成功！</h4>
            <p>请您耐心等待，我们会在服务包上线时准时为您推送！</p>
            <div class="getback" @click="getback">返回</div>
          </div>
        </el-dialog>
      </div>
      <!-- 支付二维码 -->
      <div class="duihuanBoxzf">
        <el-dialog
          :visible.sync="dialogVisible_zhifu"
          width="360px"
          :before-close="zhifuClose"
          custom-class="duihuan"
        >
          <h2>使用微信扫码支付</h2>
          <img :src="zfevm" alt="" />
        </el-dialog>
      </div>

      <!-- 问题咨询加客服弹窗 -->
      <wtzxTc
        v-if="zixunShow"
        :zykf_file_url="zxkf_file_url"
        @wtzxClose="wtzxClose"
      ></wtzxTc>
      <!-- 更新提醒弹窗 -->
      <gxtxTc
        v-if="gxtxShow"
        @gxtcClose="gxtcClose"
        :zykf_file_url="gxkf_file_url"
      >
      </gxtxTc>
      <!-- 确认订单弹窗填写图书快递地址 -->
      <div class="dddzTc">
        <el-dialog
          title=""
          :visible.sync="dialogTableVisible"
          :close-on-click-modal="true"
          :close-on-press-escape="true"
          :show-close="true"
          center
          width="540px"
        >
          <div class="chose">
            <h3>确认订单信息</h3>
            <div class="tips">Tips：请填写收货地址（*用来收取配套图书）</div>
            <el-form label-width="90px">
              <el-form-item label="收货人：">
                <input
                  v-model="shName"
                  placeholder="请填写收货人姓名"
                  spellcheck="false"
                />
              </el-form-item>
              <el-form-item label="手机号：">
                <input v-model="shNumber" placeholder="请输入您的手机联系方式" />
              </el-form-item>
              <el-form-item label="所在省市区：">
                <div class="adreess" ref="box">
                  <div class="indput">
                    <input
                      type="text"
                      @click="choseSSQ = !choseSSQ"
                      placeholder="请选择所在省市区"
                      :value="adreess"
                    />
                    <i class="el-icon-arrow-down jiantou" v-if="!choseSSQ"></i>
                    <i class="el-icon-arrow-up jiantou" v-if="choseSSQ"></i>
                  </div>
                  <div class="adreessBox" v-show="choseSSQ">
                    <div class="preBox box">
                      <div
                        class="list"
                        v-for="item in provincecodeList"
                        :key="item.code"
                        @click="chosePre(item.code, item.name)"
                        :class="{ select_color: provincecode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="cityBox box" v-if="cityList.length > 0">
                      <div
                        class="list"
                        v-for="item in cityList"
                        :key="item.code"
                        @click="choseCity(item.code, item.name)"
                        :class="{ select_color: citycode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="areaBox box" v-if="areaList.length > 0">
                      <div
                        class="list"
                        v-for="item in areaList"
                        :key="item.code"
                        @click="choseArea(item.code, item.name)"
                        :class="{ select_color: areacode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="详细地址：">
                <input v-model="dizhi" placeholder="请填写您的详细地址" />
              </el-form-item>
            </el-form>
            <div class="goodsinfo">
              <p>商品信息：</p>
              <div class="goodsBox">
                <div class="left">
                  <img :src="baoPic" alt="">
                </div>
                <div class="right">
                  <h3>{{goodsTitle}}</h3>
                  <span>附赠：{{zp_title}}</span>
                  <h6>x1</h6>
                  <div class="price">
                    <h4>￥{{price}}</h4>
                    <span>原价：￥{{old_price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="submitSet" @click="$throttle(payIt)">
              微信扫码支付
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 下载登录弹窗 -->
    <div class="loginBox">
      <el-dialog
        :visible.sync="dialogVisible_login"
        width="500px"
        :before-close="handleClose"
        custom-class="login"
      >
        <LoginTc />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import LoginTc from "../../layout/components/loginTc.vue";
import Dyqwevm from "../../components/dyqwevm/hdqwEvm"; // vue2
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import gxtxTc from "../../components/gxtxTc/gxtx.vue";
import {
  banner,
  info_goodsspec,
  list_goods,
  info_goods,
  sjtj,
  nowkemu,
  userinfo,
  zyzxinfo,
  zyzxgs,
  activityindex,
  getbookbyprogress,
  nianjilists,
  kemulists,
  versionslists,
  setnowkemu,
  sysinfo,
  create_orders,
  qywx_status,
  sysinfo_info,
  ffzyb_status,
  orderspay,
  getgoodsweekpopup,
  closepopup,
  page_times,
  info_orders,
  islogin,
  getkfinfobyip,
  list_goodstype,
  getprokjlistbykejianbaoid,
  pca,
} from "../../api/http";
export default {
  components: { LoginTc, Dyqwevm, wtzxTc, gxtxTc },
  inject: ["reload"], //刷新页面
  props: ["kefuMsg"],
  data() {
    return {
      type: "", //订阅或学习
      bannerHeight: "", //轮播图的自适应高度
      bannerList: [], //产品页banner广告图列表
      kemu_id: "", //科目id
      nianji_id: "", //年级id
      goods_id: "", //商品id
      leftInfo: [],
      leftValue: "1", //左侧悬浮栏值
      yiShow: true,
      erShow: true,
      sanShow: true,
      siShow: true,
      firstLists: [],
      afterLists: [],
      shangMonth: [
        { title: "9月" },
        { title: "10月" },
        { title: "11月" },
        { title: "12月" },
        { title: "1月" },
        { title: "2月" },
      ],
      xiaMonth: [
        { title: "3月" },
        { title: "4月" },
        { title: "5月" },
        { title: "6月" },
        { title: "7月" },
        { title: "8月" },
      ],
      info: {}, //信息汇总
      goodsLists: [], //商品列表
      fwbLists: [], //服务包列表
      sjbLists: [], //试卷包列表
      kjbLists: [], //课件包列表
      baoType: "", //包的类型
      monthList: [], //已解锁的月份
      weekList: [],
      nowMonth: "", //默认月份
      choseMonth: "", //点击选中的月份

      kf_file_url: "", //客服二维码

      isTy: true, //是否勾选同意
      guige_id: "", //规格id
      ffContents: "", //服务说明
      old_price: "", //老价格
      price: "", //价格
      gm_status: "3", //是否购买
      dialogVisible: false, //订阅弹窗

      hdQwShow: false, //活动未添加企业微信的弹窗展示
      zykf_file_url: "", //企微客服二维码
      zykf2_file_url: "", //资源客服2二维码
      ffzyb_xy: "", //付费资源包协议
      fuzybxyShow: false,
      dyzt: "", //订阅状态
      is_pay: "", //是否支付

      start_time: "", //当前月份开始推送时间

      //预约流程相关弹窗
      yuyue2Show: false, //预约弹窗2展示
      yuyue3Show: false, //预约弹窗3展示

      ddId: "", //当前要支付的订单id
      zfevm: "", //支付二维码
      dialogVisible_zhifu: false, //支付二维码展示

      zixunShow: false, //咨询客服1二维码弹窗
      zxkf_file_url: "", //咨询客服二维码

      gxtxShow: false, //更新提醒弹窗展示
      gxkf_file_url: "", //售后客服

      baoLists: [], //选中类型的包的列表
      pc_detail: "", //试卷包图
      gopay: "", //如果从资源下载弹窗跳过来的不用预约直接下载

      tc_goodsweek_lists: [], //分期数组

      payType: 1, //支付方式：全年或分期
      nowQiNum: "", //当前在看的期数
      choseQiArr: [], //选择的分期期数数组
      allQiArr: [], //全年购买要上传全部的期

      noClick: true, //防抖

      create_orders_token: "", //下单token(调用create_orders接口时传值)

      fenqiPrice: 0, //分期的价格
      all_residue_price: "", //剩余整包支付金额

      goodsweek_id: "", //周id

      dialogVisible_login: false, //登录弹窗展示

      goodsTitle: "", //商品名称
      fromPath: "", //上一级路由

      goodsTypeList: [], //商品分类列表
      baoTypeId: "", //包类型id
      goods_list: [], //某个包的年级列表
      allArr: [], //所有的包

      all_week_num: "", //全学年数量  目前二月份只有一期，但算作两期
      topXq: "", //上学期数量
      topXqPrice: "", //上学期价格
      downXq: "", //下学期数量
      downXqPrice: "", //下学期价格

      fenqiLists: [], //分期列表

      true_price: 0, //需要支付的真实价格

      up_residue_price: "", //上学期剩余价格
      down_residue_price: "", //下学期剩余价格

      nopayall: [], //未支付的全年期
      nopaytop: [], //未支付的上学期期
      nopaydown: [], //未支付的下学期期

      orderMonthTitle: "", //订单跳转来的月份名

      //确认订单信息
      dialogTableVisible:false,
      shName:'',//收货人姓名
      shNumber:'',//收货人手机号
      choseSSQ: false, //省市区选择框的显示隐藏
      adreess: "",//地址
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      provincecode: "", //省id
      citycode: "", //市id
      areacode: "", //区id
      province: "", //省名称
      city: "", //市名称
      area: "", //区名称
      dizhi:'',//详细地址

      baoPic:'',//教研包封面
      zp_title:"",//赠品名称

    };
  },
  created() {
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retRes.login_status == 1) {
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          this.nianji_id = res.retRes.nianji_id;
          if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
            this.$router.push({
              name: "Login",
              query: {
                isgq: 1,
              },
            });
          }
        });
        //判断当前用户是否需要服务包更新弹窗
        getgoodsweekpopup({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retRes == 1) {
            this.gxtxShow = true;
            this.gxkf_file_url = this.kefuMsg.qwkf_file_url;
          }
        });

        if (this.$route.query.type == "xx") {
          this.dyzt = 1;
        } else {
          this.dyzt = 0;
        }
        this.getGoods(); //获取商品列表
        this.getGoodsType(); //商品分类列表

        if (this.$route.query.type == "dy" && this.$route.query.gopay == "1") {
          this.$message({
            message: "已为您获取最优价格！",
            type: "success",
            offset: 150,
          });
        }
      } else {
        //模糊
        const container = document.querySelector(".all");
        console.log(container);
        container.style.filter = "blur(5px)";
        this.dialogVisible_login = true;
      }
    });

    console.log(this.$route.query);
    this.type = this.$route.query.type;
    this.kemu_id = this.$route.query.kemu_id;
    if (this.$route.query.gopay) {
      this.gopay = this.$route.query.gopay;
    }
    this.getBanner(); //获取banner图列表
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      this.kf_file_url = res.retRes.kf_file_url;
    });
    sysinfo_info({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "系统介绍信息");
      this.ffzyb_xy = res.retRes.ffzyb_xy;
    });
    //获取省市区数据
    pca({
      type: "p",
    }).then((res) => {
      console.log(res, "省份数据 ");
      this.provincecodeList = res.retRes;
    });
  },
  mounted() {
    console.log(this.$globalUrl, "请求地址");
    //获取可视化窗口宽度
    const screenWidth = document.documentElement.clientWidth;
    console.log(screenWidth / (1920 / 280), "asdadasd");
    this.bannerHeight = screenWidth / (1920 / 280);
    const that = this;
    window.onresize = () => {
      return (() => {
        const screenWidth = document.documentElement.clientWidth;
        if (screenWidth >= 1200) {
          that.bannerHeight = screenWidth / (1920 / 280);
        } else if (screenWidth < 1200) {
          that.bannerHeight = 1200 / (1920 / 280);
        }
      })();
    };

    if (this.$route.query.leftValue) {
      setTimeout(() => {
        this.goToAnchor("#beizhan", 6);
      }, 500);
    }

    let caidan = document.querySelector(".floatingLeft");
    if ($(window).width() >= 1520) {
      caidan.style.left = ($(window).width() - 1500) / 2 + "px";
      caidan.style.top = this.bannerHeight + 100 + "px";
    } else {
      caidan.style.left = "20px";
      caidan.style.top = this.bannerHeight + 100 + "px";
    }
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
    window.addEventListener("resize", this.getWindowSize, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
    window.removeEventListener("scroll", this.getWindowSize, true);
    clearInterval(this.zfTimer);
    this.zfTimer = null;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log(from, "from");
      vm.fromPath = from.path; //获取上一级路由的路径
    });
  },
  methods: {
    //选择省
    chosePre(code, name) {
      console.log(code);
      this.provincecode = code;
      this.province = name + "/";
      this.citycode = "";
      this.city = "";
      this.areacode = "";
      this.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.citycode = code;
      this.city = name + "/";
      this.areacode = "";
      this.area = "";
      pca({
        type: "a",
        pcode: this.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.areacode = code;
      this.area = name;
      this.choseSSQ = false;
      this.adreess = this.province + this.city + this.area;
    },
    //根据课件包id获取教辅图书课件列表
    getprokjlistbykejianbaoid() {
      getprokjlistbykejianbaoid({
        md5key: localStorage.getItem("md5key"),
        id: 2607,
      }).then((res) => {
        console.log(res);
      });
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //通过id寻找期
    fondQi(id) {
      let a = "";
      this.tc_goodsweek_lists.forEach((item) => {
        if (item.id == id) {
          a = item.yf_title + item.title;
        }
      });
      return a;
    },
    //选择全年支付
    chodeAll() {
      this.payType = 1;
      this.choseQiArr = [];
      this.fenqiPrice = 0;
      // this.fenqiLists = this.tc_goodsweek_lists;
      this.true_price = this.all_residue_price;
      this.tc_goodsweek_lists.forEach((item) => {
        if (item.id == this.allQiArr[0]) {
          console.log(item.yf_title);
          this.firstLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
          this.afterLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
        }
      });
    },
    //选择分期支付
    chodeFq() {
      this.payType = 2;
    },
    //选择上学期分期
    chodeshang() {
      this.payType = 2;
      this.true_price = this.up_residue_price;
      this.choseQiArr = [];
      this.nopaytop.forEach((item) => {
        if (this.choseQiArr.indexOf(item) == -1) {
          this.choseQiArr.push(item);
        }
      });
      this.tc_goodsweek_lists.forEach((item) => {
        if (item.id == this.choseQiArr[0]) {
          console.log(item.yf_title);
          this.firstLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
          this.afterLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
        }
      });
      // if(this.isContained(this.choseQiArr,this.nopaytop)){
      //   this.nopaytop.forEach(item=>{
      //     if(this.choseQiArr.indexOf(item) != -1){
      //       console.log(item)
      //       this.choseQiArr.splice(this.choseQiArr.indexOf(item), 1);
      //     }
      //   })
      // }else{
      //   this.nopaytop.forEach(item=>{
      //     if(this.choseQiArr.indexOf(item) == -1){
      //       this.choseQiArr.push(item);
      //     }
      //   })

      // }
    },
    //选择下学期分期
    chodexia() {
      this.payType = 3;
      this.choseQiArr = [];
      this.true_price = this.down_residue_price;
      this.nopaydown.forEach((item) => {
        if (this.choseQiArr.indexOf(item) == -1) {
          this.choseQiArr.push(item);
        }
      });
      this.tc_goodsweek_lists.forEach((item) => {
        if (item.id == this.choseQiArr[0]) {
          console.log(item.yf_title);
          this.firstLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
          this.afterLists.forEach((list) => {
            if (list.title == item.yf_title) {
              this.chosedMonth(list);
              console.log(item);
            }
          });
        }
      });
      // this.info.goodsxq_lists.forEach((item) => {
      //   arr.push(...item.goodsyf_lists);
      // });

      // if(this.isContained(this.choseQiArr,this.nopaydown)){
      //   this.nopaydown.forEach(item=>{
      //     if(this.choseQiArr.indexOf(item) != -1){
      //       console.log(item)
      //       this.choseQiArr.splice(this.choseQiArr.indexOf(item), 1);
      //     }
      //   })
      // }else{
      //   this.nopaydown.forEach(item=>{
      //     if(this.choseQiArr.indexOf(item) == -1){
      //       this.choseQiArr.push(item);
      //     }
      //   })

      // }
    },
    //浮点数加
    add(a, b) {
      var c, d, e;
      try {
        c = a.toString().split(".")[1].length;
      } catch (f) {
        c = 0;
      }
      try {
        d = b.toString().split(".")[1].length;
      } catch (f) {
        d = 0;
      }
      return (
        (e = Math.pow(10, Math.max(c, d))),
        (this.mul(a, e) + this.mul(b, e)) / e
      );
    },
    //浮点数 减
    sub(a, b) {
      var c, d, e;
      try {
        c = a.toString().split(".")[1].length;
      } catch (f) {
        c = 0;
      }
      try {
        d = b.toString().split(".")[1].length;
      } catch (f) {
        d = 0;
      }
      return (
        (e = Math.pow(10, Math.max(c, d))),
        (this.mul(a, e) - this.mul(b, e)) / e
      );
    },
    //浮点数乘
    mul(a, b) {
      var c = 0,
        d = a.toString(),
        e = b.toString();
      try {
        c += d.split(".")[1].length;
      } catch (f) {}
      try {
        c += e.split(".")[1].length;
      } catch (f) {}
      return (
        (Number(d.replace(".", "")) * Number(e.replace(".", ""))) /
        Math.pow(10, c)
      );
    },
    //浮点数除
    div(a, b) {
      var c,
        d,
        e = 0,
        f = 0;
      try {
        e = a.toString().split(".")[1].length;
      } catch (g) {}
      try {
        f = b.toString().split(".")[1].length;
      } catch (g) {}
      return (
        (c = Number(a.toString().replace(".", ""))),
        (d = Number(b.toString().replace(".", ""))),
        this.mul(c / d, Math.pow(10, f - e))
      );
    },
    //切换包类型对应的年级
    changeNj(e) {
      console.log(this.baoTypeId);
      this.nianji_id = e;
      this.allArr.forEach((item) => {
        if (item.nianji_id == this.nianji_id && this.baoTypeId == item.type) {
          this.goods_id = item.id;
        }
      });
      this.getGoodInfo();
      // this.chodeAll()
    },
    //关闭更新弹窗
    gxtcClose() {
      this.gxtxShow = false;
      closepopup({
        md5key: localStorage.getItem("md5key"),
      });
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.hdQwShow = false;
    },
    //获取banner图列表
    getBanner() {
      //获取产品页banner图
      banner({
        md5key: localStorage.getItem("md5key"),
        systypes_id: 10009,
        device_type_id: 201,
      }).then((res) => {
        console.log(res, "产品页banner");
        if (res.retInt == 1) {
          this.bannerList = res.retRes;
        } else if (res.retInt == 0) {
          this.$message.error(res.retErr);
        }
      });
    },
    //获取商品分类列表
    getGoodsType() {
      list_goodstype({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        console.log(res, "商品分类列表");
        this.goodsTypeList = res.retRes;
        this.allArr = [];
        this.goodsTypeList.forEach((item) => {
          if (item.id == 4) {
            this.allArr.push(...item.goods_list);
          }
        });
        console.log(this.allArr);
        if (this.$route.query.id) {
          //有包id的情况，如链接打开，订单列表，活动直播间跳转过来等
          this.goods_id = this.$route.query.id;
          this.allArr.forEach((item) => {
            if (this.goods_id == item.id) {
              this.baoTypeId = item.type;
              this.nianji_id = item.nianji_id;
              console.log(this.baoTypeId);
              setTimeout(() => {
                this.getGoodInfo();
              }, 100);
            }
          });
        } else {
          //没有id也没有类型的情况下，默认第一个类型的第一个包，同时复制该包的年级和类型id
          this.goods_id = this.allArr[0].id;
          this.allArr.forEach((item) => {
            if (this.goods_id == item.id) {
              this.baoTypeId = item.type;
              this.nianji_id = item.nianji_id;
              this.getGoodInfo();
            }
          });
        }
      });
    },
    //获取商品列表
    getGoods() {
      list_goods({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        // dyzt: this.dyzt,
      }).then((res) => {
        console.log(res, "商品列表");
        this.goodsLists = res.retRes;
        if (this.$route.query.gopay == 1 && this.$route.query.type == "dy") {
          page_times({
            table_name: "goods_gm",
            row_id: this.goods_id,
          });
        } else if (!this.$route.query.gopay && this.$route.query.type == "dy") {
          page_times({
            table_name: "goods_yy",
            row_id: this.goods_id,
          });
        }
        console.log(123);
        if (this.$route.query.goodsyf_title) {
          this.orderMonthTitle = this.$route.query.goodsyf_title;
        } else {
          this.orderMonthTitle = "";
        }
        // this.getGoodInfo();
      });
    },
    //获取商品详情
    getGoodInfo() {
      this.fenqiPrice = 0;
      info_goods({
        md5key: localStorage.getItem("md5key"),
        id: this.goods_id,
      }).then((res) => {
        console.log(res, "商品详情");
        this.baoType = res.retRes.type;
        this.baoPic = res.retRes.file_url;
        // if(this.baoType == 1){
        //   this.baoLists = this.fwbLists;
        // }
        if (this.baoType == 2) {
          this.pc_detail = res.retRes.spec_lists[0].pc_detail;
        }
        // if(this.baoType == 3){
        //   this.baoLists = this.kjbLists;
        // }
        this.guige_id = res.retRes.spec_lists[0].id;
        this.getInfo(res.retRes.spec_lists[0].id); //去学习首页  商品规格/套餐【详情】
      });
    },
    //判断数组是否包含另一个数组所有的元素
    isContained(a, b) {
      // a和b其中一个不是数组，直接返回false
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      const len = b.length;
      // a的长度小于b的长度，直接返回false
      if (a.length < len) return false;
      for (let i = 0; i < len; i++) {
        // 遍历b中的元素，遇到a没有包含某个元素的，直接返回false
        if (!a.includes(b[i])) return false;
      }
      // 遍历结束，返回true
      return true;
    },
    // 商品规格/套餐【详情】
    getInfo(id) {
      info_goodsspec({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        console.log(res, "商品规格/套餐【详情】");
        this.goodsTitle = res.retRes.goods_title;
        this.old_price = res.retRes.old_price;
        this.price = res.retRes.price;
        this.zp_title = res.retRes.zp_title;
        this.all_residue_price = res.retRes.all_residue_price;
        this.up_residue_price = res.retRes.up_residue_price;
        this.down_residue_price = res.retRes.down_residue_price;
        this.ffContents = res.retRes.contents;
        this.gm_status = res.retRes.gm_status;
        this.is_pay = res.retRes.is_pay;
        this.all_week_num = res.retRes.all_week_num;
        this.info = res.retRes;
        this.create_orders_token = res.retRes.create_orders_token;
        const arr = [];
        this.info.goodsxq_lists.forEach((item) => {
          arr.push(...item.goodsyf_lists);
          if (item.title == "上学期") {
            this.firstLists = item.goodsyf_lists;
            this.topXq = item.xqweek_num;
            this.topXqPrice = item.price;
          } else if (item.title == "下学期") {
            this.afterLists = item.goodsyf_lists;
            this.downXq = item.xqweek_num;
            this.downXqPrice = item.price;
          }
        });

        setTimeout(() => {
          const planLeft = document.querySelector(".planLeft");
          const planRight = document.querySelector(".planRight");
          const all = this.firstLists.length + this.afterLists.length;
          planLeft.style.width = (this.firstLists.length / all) * 1201 + "px";
          planRight.style.width = (this.afterLists.length / all) * 1201 + "px";
        }, 100);

        // this.chosedMonth(arr[0]);
        console.log(this.orderMonthTitle);
        arr.forEach((item) => {
          this.monthList.push(item.title);
          if (item.is_def == 1 && !this.orderMonthTitle) {
            this.choseMonth = this.nowMonth = item.title;
            this.chosedMonth(item);
            this.nowQiNum = [];
            item.goodsweek_lists.forEach((list) => {
              this.nowQiNum.push(list.id);
            });
            console.log(item.title);
          } else if (
            this.orderMonthTitle &&
            item.title == this.orderMonthTitle
          ) {
            this.choseMonth = this.nowMonth = item.title;
            this.chosedMonth(item);
            this.nowQiNum = [];
            item.goodsweek_lists.forEach((list) => {
              this.nowQiNum.push(list.id);
            });
            console.log(2);
          }
        });

        //分期内容
        this.tc_goodsweek_lists = res.retRes.tc_goodsweek_lists;
        this.fenqiLists = res.retRes.tc_goodsweek_lists;
        this.allQiArr = [];
        this.choseQiArr = [];
        this.nopaytop = [];
        this.nopaydown = [];
        this.tc_goodsweek_lists.forEach((item) => {
          //未支付的全年期id
          if (item.is_pay == 0) {
            this.allQiArr.push(item.id);
          }
          //未支付的全年期
          if (item.is_pay == 0) {
            this.nopayall.push(item.id);
          }
          //未支付的上学期期
          if (item.xq_title == "上学期" && item.is_pay == 0) {
            this.nopaytop.push(item.id);
          }
          //未支付的下学期期
          if (item.xq_title == "下学期" && item.is_pay == 0) {
            this.nopaydown.push(item.id);
          }
        });
        // console.log(this.choseQiArr);
        // console.log(this.nopaytop);
        // console.log(this.nopaydown);

        //如果个人中心订单列表跳转过来
        if (
          this.$route.query.isall &&
          this.$route.query.isall == 2 &&
          this.$route.query.id == this.goods_id &&
          this.$route.query.status != 5
        ) {
          this.payType = this.$route.query.isall;
          // 如果是分期
          if (this.$route.query.isall == 2) {
            const weekNum = this.$route.query.week_ids.map(function (item) {
              return item - 0;
            });
            if (this.$route.query.status != 1) {
              this.payType = 1;
            } else {
              this.tc_goodsweek_lists.forEach((item) => {
                if (weekNum.indexOf(item.id) != -1) {
                  // console.log(item, "123");
                  // console.log("hahahhah")
                  this.choseQi(item);
                }
              });
            }
          }
        } else if (this.$route.query.goodsweek_id && this.baoType == 1) {
          this.tc_goodsweek_lists.forEach((item) => {
            if (item.id == this.$route.query.goodsweek_id) {
              this.choseQi(item);
            }
          });
        } else {
          // this.chodeAll();
          this.payType = 1;
          this.choseQiArr = [];
          this.fenqiPrice = 0;
          this.true_price = this.all_residue_price;
        }
      });
    },
    //点击切换月份
    chosedMonth(item) {
      console.log(item);
      if (item.id && item.goodsweek_lists.length > 0) {
        if (
          (this.type == "xx" &&
            new Date().getTime() >= item.start_time * 1000) ||
          this.type == "dy"
        ) {
          this.start_time = item.start_time;
          this.weekList = item.goodsweek_lists;
          this.choseMonth = item.title;
          this.nowMonth = "";
        }
      }
    },
    //前往课件包
    gokejianbao(id, gm_status, infoid, type) {
      if (this.type == "xx" && id && id != 0) {
        this.$router.push({
          name: "Beikeziyuan",
          query: {
            id: id,
            infoid: infoid ? infoid : "",
            type: type,
            isdingzhi: 1,
            dingzhi: {
              baoName: this.goodsTitle,
              path: this.$route.path,
              query:
                "?id=" +
                this.goods_id +
                "&kemu_id=" +
                this.kemu_id +
                "&type=xx",
              fromPath: this.fromPath,
            },
          },
        });
      }
    },
    //前往图书详情
    goproduct(id,kejianbao_id){
      // console.log(id)
      this.$router.push({
          name: "ProductDetails",
          query: {
            id: id,
            kejianbao_id:kejianbao_id
          },
        });
    },
    //跳转广告图
    advert(href) {
      if (href != "" && href != "#") {
        window.open(href, "_blank");
      }
    },
    //滚动监听
    handleScrollY() {
      // 左侧悬浮框双向定位
      const leftInfo = this.weekList;
      leftInfo.forEach((item, index) => {
        item.index = index + 1;
        item.name = "#type" + (index + 1);
        item.height = document
          .querySelector("#week" + (index + 1))
          .getBoundingClientRect().bottom;
      });
      // leftInfo.sort((a, b) => {
      //   return a.height - b.height;
      // });
      // console.log(leftInfo)
      this.leftValue = leftInfo.find((item) => item.height - 300 >= 0).index;
    },
    //窗口大小监听
    getWindowSize() {
      const floatingLeft = document.querySelector(".floatingLeft");
      // console.log($(window).width())
      if ($(window).width() >= 1520) {
        floatingLeft.style.left = ($(window).width() - 1500) / 2 + "px";
        floatingLeft.style.top = this.bannerHeight + 100 + "px";
      } else {
        floatingLeft.style.left = "20px";
        floatingLeft.style.top = this.bannerHeight + 100 + "px";
      }
    },
    //左边悬浮窗锚点定位
    goToAnchor(selector, index) {
      const select = document.querySelector(selector);
      let scrollHeight = select.offsetTop - 80;
      console.log(scrollHeight);
      window.scrollTo({
        top: scrollHeight,
        behavior: "smooth",
      });
      this.leftValue = index;
    },
    //修改后的订阅课件包
    dingyue() {
      page_times({
        table_name: "goods_yydj",
        row_id: this.goods_id,
      });
      create_orders({
        md5key: localStorage.getItem("md5key"),
        is_all_gm: 1,
        // goods_arr: [{ goodsspec_id: this.guige_id, num: 1 }],
        goodsspec_id: this.guige_id,
        create_orders_token: this.create_orders_token,
        yy: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          this.ddId = res.retRes.id;
          // qywx_status({
          //   md5key: localStorage.getItem("md5key"),
          //   // kf_account: this.kefuMsg.hdkf_account,
          // }).then((res) => {
          //   console.log(res);
          //   if (res.retRes.qywx_status == 0) {
          //     this.zykf2_file_url = this.kefuMsg.zykf_file_url; //客服2
          //     this.yuyue2Show = true;
          //   } else {
          //     this.yuyue2Show = false;
          //     this.yuyue3Show = true;
          //   }
          // });
          getkfinfobyip({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            console.log(res);
            if (
              res.retRes.local_zxkf_status == 1 ||
              res.retRes.local_yykf_status == 1
            ) {
              this.yuyue3Show = true;
              this.yuyue2Show = false;
            } else {
              this.zykf2_file_url = res.retRes.local_yykf_info.file_url; //客服2
              this.yuyue2Show = true;
            }
          });
        }
      });
    },
    //支付
    payIt() {
      if(!this.shName){
        this.$message({
          message: "请填写收获人姓名",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.areacode) {
        this.$message({
          message: "请选择所在省市区",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.shNumber) {
        this.$message({
          message: "请填写手机号码",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      }else if (!this.dizhi) {
        this.$message({
          message: "请填写详细地址",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      }else{
        page_times({
          table_name: "goods_gmdj",
          row_id: this.goods_id,
        });
        create_orders({
          md5key: localStorage.getItem("md5key"),
          // is_all_gm: this.payType == 1 ? 1 : 0,
          goodsspec_id: this.guige_id,
          create_orders_token: this.create_orders_token,
          orders_price: this.true_price,
          yy: 0,
          linkname:this.shName,
          linkphone:this.shNumber,
          address:this.dizhi,
          provincecode:this.provincecode,
          citycode:this.citycode,
          areacode:this.areacode
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res);
            this.ddId = res.retRes.id;
            orderspay({
              md5key: localStorage.getItem("md5key"),
              id: this.ddId,
              type: "qrcode",
            }).then((res) => {
              const that = this;
              if (res.retInt == 1) {
                this.zfevm = this.$globalUrl + res.retRes.ewm_file_url;
                // this.zfevm = this.$globalUrl + res.retRes.ewm_file_url;
                this.dialogVisible_zhifu = true;
              }
              this.zfTimer = setInterval(() => {
                info_orders({
                  md5key: localStorage.getItem("md5key"),
                  id: this.ddId,
                }).then((res) => {
                  console.log(res);
                  if (res.retRes.status != 1) {
                    clearInterval(that.zfTimer);
                    that.zfTimer = null;

                    that.dialogVisible_zhifu = false;
                    // this.getGoodInfo();
                    this.$router.push({
                      name: "OrderList",
                    });
                  }
                });
              }, 3000);
            });
          }
        });
      }
    },
    //关闭支付弹窗
    zhifuClose() {
      clearInterval(this.zfTimer);
      this.zfTimer = null;
      this.zfTimer = "";

      this.dialogVisible_zhifu = false;
    },
    //关闭订阅成功弹窗
    handleClose() {
      this.dialogVisible = false;
      this.reload();
    },
    getback() {
      this.yuyue2Show = false;
      this.yuyue3Show = false;
      this.getGoodInfo();
    },
    //前往我得订单
    godingdan() {
      this.$router.push({
        name: "OrderList",
      });
    },
    //点击咨询
    zixun() {
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res);
        this.zxkf_file_url = res.retRes.local_zxkf_info.file_url;
      });
      this.zixunShow = true;
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose() {
      this.zixunShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  .banner {
    margin: 0px auto;
    width: 100%;
    .el-carousel {
      width: 100%;
      height: 100%;
      // border-radius: 20px;
      .el-carousel__item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .caidan {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    .floatingLeft {
      position: fixed;
      top: 200px;
      width: 120px;
      background: #ffffff;
      border-radius: 4px;
      z-index: 1;
      ul {
        cursor: pointer;
        li {
          text-align: center;
          line-height: 48px;
          width: 120px;
          height: 48px;
          border-radius: 4px;
          font-size: 14px;
          color: #333;
          img {
            margin-right: 5px;
            width: 12px;
          }
        }
        li:hover {
          background: #08a579;
          color: #fff;
        }
      }
      .choseLi {
        background: #08a579;
        color: #fff;
      }
    }
  }
  .liucheng {
    margin: 20px auto;
    width: 1200px;
    height: 200px;
    // background-image: url("../../assets/img/activeNew/dingzibg_1200.png");
    // background-size: 100%;
    // background-repeat: no-repeat;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    h3 {
      margin: 32px 0 20px 24px;
      font-size: 20px;
      color: #fff;
    }
    .jindu {
      display: flex;
      // margin-left: 300px;
      position: relative;
      left: 180px;
      // align-items: center;
      .first {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        left: 0px;
        img {
          width: 52px;
          height: 52px;
        }
        p {
          font-size: 18px;
          color: #fff;
          font-weight: bold;
        }
        p:first-of-type {
          margin-top: 10px;
        }
      }
      .lianjie1,
      .lianjie2 {
        position: relative;
        left: -20px;
        top: 24px;
        width: 360px;
        height: 3px;
      }
      .lianjie2 {
        position: relative;
        left: -148px;
        top: 24px;
      }
      .second,
      .third {
        position: relative;
        left: -84px;
        top: 16px;
        img {
          width: 20px;
          height: 20px;
        }
        p {
          font-size: 16px;
          opacity: 0.9;
          font-weight: normal;
        }
        p:first-of-type {
          margin-top: 18px;
        }
      }
      .third {
        position: relative;
        left: -220px;
        top: 16px;
      }
    }
  }
  .baoTaps {
    display: flex;
    margin: 20px auto;
    width: 1200px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    .left {
      margin: 34px 0 0 20px;
      .baoBanner {
        width: 350px;
        height: 175px;
        /deep/.el-carousel__container {
          z-index: 0;
          height: 175px;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .changeBaoText {
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 350px;
        height: 36px;
        background: #e8fbf6;
        border-radius: 18px;
        .bao {
          // margin-left: 20px;
          text-align: center;
          font-size: 16px;
          color: #08a579;
          line-height: 36px;
          width: 115px;
          cursor: pointer;
          user-select: none;
        }
        .chosedBao {
          width: 120px;
          height: 36px;
          background: #08a579;
          border-radius: 18px;
          color: #fff;
        }
      }
      // .changeBao{
      //   display: flex;
      //   align-items: center;
      //   margin-top: 22px;
      //   margin-bottom: 22px;
      //   .leftAn,.rightAn{
      //     cursor: pointer;
      //   }
      //   .pics{
      //     display: flex;
      //     align-items: center;
      //     margin: 0 15px;
      //     width: 280px;
      //     .pic{
      //       margin-right: 10px;
      //       width: 88px;
      //       height: 44px;
      //       cursor: pointer;
      //       img{
      //         width: 100%;
      //         height: 100%;
      //       }
      //     }
      //     .chosePic{
      //       border: 2px solid #08A579;
      //     }
      //     .pic:last-of-type{
      //       margin: 0;
      //     }
      //   }
      // }
    }
    .right {
      margin-left: 28px;
      margin-top: 30px;
      h4 {
        font-size: 16px;
        color: #333;
      }
      .nianji,
      .buyType,
      .fenqiBuy {
        display: flex;
        // align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
        p {
          margin-bottom: 6px;
          margin-right: 8px;
          font-size: 14px;
          color: #999;
          line-height: 34px;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          width: 710px;
          span {
            margin-right: 6px;
            margin-bottom: 6px;
            padding: 10px 14px;
            font-size: 12px;
            color: #666;
            border: 1px solid #cccccc;
            cursor: pointer;
          }
        }
      }
      .fenqiBuy {
        .list {
          span {
            display: inline-block;
            width: 133px;
            padding: 10px 0px;
            text-align: center;
          }
        }
      }
      .canchose {
        cursor: not-allowed !important;
        background: #f2f2f2;
      }
      .chosedNj {
        background: #fdeeee;
        border: 1px solid #df3033 !important;
        color: #df3033 !important;
      }
      .choseBuyType {
        background: #e8fbf6;
        border: 1px solid #08a579 !important;
        color: #08a579 !important;
      }
      .chosedPrice {
        display: flex;
        margin-top: 14px;
        p {
          margin-bottom: 6px;
          margin-right: 8px;
          font-size: 14px;
          color: #999;
          line-height: 34px;
        }
        .price {
          display: flex;
          p {
            margin: 0;
            font-size: 14px;
            font-weight: bold;
            color: #f25555;
          }
          h3 {
            font-size: 24px;
            color: #f25555;
          }
        }
      }
      .buyIt {
        display: flex;
        margin: 40px 0;
        .goBuy {
          width: 128px;
          height: 44px;
          background: #08a579;
          font-size: 18px;
          color: #fff;
          text-align: center;
          line-height: 44px;
          cursor: pointer;
        }
        .goBuy:active {
          opacity: 0.8;
        }
        .zx {
          display: flex;
          align-items: center;
          margin-left: 28px;

          cursor: pointer;
          img {
            margin-right: 4px;
            width: 20px;
            height: 20px;
          }
          span {
            font-size: 16px;
            color: #08a579;
          }
        }
      }
    }
  }
  .dyy {
    display: flex;
    margin: 20px auto;
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    .left {
      position: relative;
      margin: 30px 80px 30px 40px;
      width: 220px;
      height: 260px;
      background-image: url("../../assets/img/ffzyb/baoLeft.png");
      background-repeat: no-repeat;
      background-size: 100%;
      img {
        margin-top: 28px;
        margin-left: 30px;
        width: 160px;
        height: 40px;
      }
      h4 {
        position: absolute;
        top: 36px;
        left: 76px;
        font-size: 16px;
        color: #fff;
      }
      .baoTpList {
        margin-left: 50px;
        margin-top: 20px;
        user-select: none;
        span {
          display: inline-block;
          margin-bottom: 10px;
          text-align: center;
          width: 120px;
          height: 36px;
          line-height: 36px;
          color: #08a579;
          font-size: 14px;
          background: #f4fffc;
          border: 1px solid #abf3df;
          border-radius: 4px;
          cursor: pointer;
        }
        .choseType {
          background: #08a579;
          color: #fff;
        }
        span:active {
          opacity: 0.8;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .list {
        margin-right: 60px;
        width: 220px;
        cursor: pointer;
        .pic {
          position: relative;
          width: 220px;
          height: 200px;
          background-image: url("../../assets/img/ffzyb/zxfwb2.png");
          background-repeat: no-repeat;
          background-size: 100%;
          overflow: hidden;
          .kemu {
            margin: 57px 0 38px 20px;
            text-align: center;
            width: 60px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
            background: #f8ca2b;
            border-radius: 4px;
          }
          p {
            margin-left: 20px;
            font-size: 14px;
            color: #f79947;
            width: 184px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tips {
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: center;
            font-size: 14px;
            color: #fff;
            line-height: 24px;
            width: 72px;
            height: 24px;
            background: #08a579;
            border-radius: 10px 0px 10px 0px;
          }
        }
        .shijuan {
          background-image: url("../../assets/img/ffzyb/ycsjb2.png");
          h4 {
            margin-top: 66px;
            text-align: center;
            font-size: 16px;
            color: #aa6028;
          }
          p {
            margin: 0 auto;
            margin-top: 34px;
            color: #aa6028;
            width: 166px;
            text-align: center;
          }
        }
        .kejian {
          background-image: url("../../assets/img/ffzyb/yckjb2.png");
          p {
            color: #f77665;
          }
        }
        h5 {
          margin-top: 14px;
          text-align: center;
          font-size: 16px;
          color: #999;
        }
      }
      .choseBao {
        width: 220px;
        .pic {
          background-image: url("../../assets/img/ffzyb/zxfwb.png");
          box-shadow: 0px 5px 10px 0px #faa3458c;
          border-radius: 10px;
          .kemu {
            background: #f8ca2b;
          }
          p {
            color: #fff;
          }
        }
        h5 {
          color: #333;
        }
        .shijuan {
          background-image: url("../../assets/img/ffzyb/ycsjb.png");
          box-shadow: none;
          h4 {
            color: #a14d09;
          }
          .tips {
            bottom: 34px;
          }
          p {
            margin: 0 auto;
            margin-top: 34px;
            color: #a14d09;
            width: 184px;
            text-align: center;
          }
        }
        .kejian {
          background-image: url("../../assets/img/ffzyb/yckjb.png");
        }
      }
      .list:hover {
        .pic {
          position: relative;
          top: -10px;
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    .xxy {
      h2 {
        margin-left: 20px;
        font-size: 20px;
        line-height: 84px;
        color: #333;
      }
      .goods {
        display: inline-block;
        margin-bottom: 20px;
        margin-left: 20px;
        width: auto;
        height: 47px;
        border-radius: 4px;
        border: 1px solid #07a579;
        .goodsList {
          display: flex;
          p {
            padding: 14px 20px;
            font-size: 16px;
            cursor: pointer;
            color: #656565;
          }
          .pChose {
            background: #07a579;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
    .plans {
      display: flex;
      margin-bottom: 30px;
      .planLeft,
      .planRight {
        width: 600px;
        height: 160px;
        background-image: url("../../assets/img/dingzhi_left.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // background: #E6FDEE;
        .top {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 30px;
          img {
            position: relative;
            top: 1px;
            width: 18px;
            height: 20px;
          }
          h3 {
            margin-left: 6px;
            font-size: 20px;
          }
        }
        .monthLists {
          position: relative;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 30px;
          .duan {
            display: inline-block;
            position: absolute;
            top: 16px;
            width: 100%;
            height: 10px;
            background-color: #fff;
          }
          .month {
            display: flex;
            align-items: center;
            position: relative;
            // width: 44px;
            height: 44px;
            cursor: pointer;
            .num {
              position: relative;
              width: 44px;
              img {
                width: 100%;
              }
              p {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 44px;
                text-align: center;
                line-height: 44px;
                color: #969799;
              }
              .nowText {
                color: #fff;
                font-weight: bold;
              }
            }
            .chang {
              display: inline-block;
              width: 54px;
              height: 10px;
              background-color: #fff;
            }
            .tips {
              position: absolute;
              bottom: -20px;
              left: -4px;
              color: #999;
              width: 60px;
            }
          }
          .month:last-of-type {
            .chang {
              display: none;
            }
          }
        }
      }
      .planRight {
        background-image: url("../../assets/img/dingzhi_right.png");
      }
    }
    .weekLists {
      margin: 0 auto;
      margin-bottom: 40px;
      width: 1160px;
      .top {
        position: relative;
        background-color: #2fbf97;
        border-radius: 10px;
        h4 {
          text-align: center;
          line-height: 60px;
          color: #fff;
          font-size: 16px;
        }
        .do {
          display: flex;
          justify-content: right;
          align-items: center;
          position: absolute;
          top: 0;
          right: 0;
          width: 320px;
          height: 60px;
          line-height: 60px;
          text-align: right;
          background-image: url("../../assets/img/dingzhi_tips12.png");
          background-repeat: no-repeat;
          background-size: 100%;
          cursor: pointer;
          p {
            margin-right: 20px;
            font-size: 12px;
            color: #08a579;
            width: 96px;
            text-align: center;
            height: 28px;
            line-height: 28px;
            background: #ffffff;
            border-radius: 14px;
          }
        }
      }
      .details {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 400px;
          // height: 90px;
          background: #e8fbf6;
          border-radius: 10px;
          line-height: 22px;

          h4 {
            padding: 10px 0;
            width: 346px;
            color: #027b59;
            font-size: 14px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;

          .list {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            width: 740px;
            height: 100%;
            background: #f5faf8;
            border-radius: 10px;
            cursor: pointer;
            p {
              margin-left: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #027b59;
            }
          }
          .list:last-of-type {
            margin: 0;
          }
          .list:nth-of-type(2n) {
            background: #e8fbf6;
          }
          .jiaoyan{
            display: flex;
            justify-content: space-between;
            p{
              user-select: none;
              cursor: pointer;
            }
          }
        }
      }
      
    }
  }
  .fuwu {
    margin: 0 auto;
    margin-bottom: 35px;
    margin-bottom: 185px;
    width: 1200px;
    // height: 390px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    .fenqi {
      .fqBox {
        margin: 0 auto;
        width: 1160px;
        // height: 180px;
        background: #f5f5f5;
        border-radius: 10px;
        overflow: hidden;
        .quannian {
          display: flex;
          align-items: center;
          margin: 20px;
          cursor: pointer;
          user-select: none;
          .chose {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            img {
              position: relative;
              top: 1px;
              width: 16px;
              height: 16px;
            }
          }
          .details {
            font-size: 14px;
            span {
              color: #f25555;
            }
          }
        }
        .qishu {
          display: flex;
          align-items: center;
          margin: 20px;
          cursor: pointer;
          user-select: none;
          .chose {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            img {
              position: relative;
              top: 1px;
              width: 16px;
              height: 16px;
            }
          }
          .details {
            font-size: 14px;
            span {
              color: #f25555;
            }
          }
        }
        .qiLists {
          display: flex;
          flex-wrap: wrap;
          margin-left: 46px;
          .yue {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            width: 138px;
            cursor: pointer;
            user-select: none;
            img {
              margin-right: 6px;
              width: 14px;
              height: 14px;
            }
            .tips {
              margin-left: 5px;
              text-align: center;
              line-height: 14px;
              width: 44px;
              height: 14px;
              font-size: 12px;
              background: #fae6e6;
              border-radius: 2px;
              color: #f25555;
            }
          }
        }
      }
    }
    h2 {
      margin: 32px 0 20px 22px;
      font-size: 20px;
      color: #333;
    }
    p {
      margin-left: 22px;
      font-size: 16px;
      color: #333;
      line-height: 30px;
      font-family: 微软雅黑 !important;
      /deep/ font {
        font-family: 微软雅黑 !important;
      }
    }
    .kefu {
      display: flex;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 20px;
      margin-left: 440px;
      .pic {
        width: 130px;
        height: 130px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .msg {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        h4 {
          margin-bottom: 10px;
          font-size: 14px;
          color: #333333;
        }
        p {
          margin: 0;
          font-size: 14px;
          color: #07a579;
        }
      }
    }
  }
  .footerBox {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 140px;
    background: #fff;
    overflow: hidden;
    .footerMsg {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: 20px;
      width: 1200px;
      .left {
        // .price {
        //   position: relative;
        //   display: flex;
        //   align-items: center;
        //   span {
        //     margin-right: 5px;
        //     font-size: 48px;
        //     color: #07a579;
        //   }
        //   p {
        //     position: relative;
        //     top: 10px;
        //     font-size: 18px;
        //     color: #07a579;
        //   }
        //   .youhui {
        //     position: relative;
        //     top: -18px;
        //     width: 122px;
        //     height: 32px;
        //     background: #e7fbf5;
        //     border-radius: 20px 4px 20px 4px;
        //     font-size: 16px;
        //     color: #07a579;
        //     text-align: center;
        //     line-height: 32px;
        //   }
        // }
        .xieyi {
          display: flex;
          align-items: center;
          margin-top: 5px;
          font-size: 14px;
          color: #333;
          img {
            position: relative;
            top: 1px;
            margin-left: 8px;
            margin-right: 10px;
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
          span {
            font-size: 14px;
            color: #0bc690;
            cursor: pointer;
          }
          span:hover {
            text-decoration: underline;
          }
        }
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        // margin-left: 80px;
        width: 250px;
        height: 60px;
        background: #07a579;
        border-radius: 10px;
        text-align: center;
        line-height: 60px;
        font-weight: bold;
        font-size: 22px;
        color: #fff;
        cursor: pointer;
      }
    }
    .pay {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      margin-top: 20px;
      width: 1200px;
      user-select: none;
      .left {
        display: flex;
        align-items: center;
        .price {
          display: flex;
          flex-direction: column;
          h2 {
            color: #f25555;
            font-size: 48px;
          }
          span {
            position: absolute;
            bottom: 30px;
            font-size: 14px;
            color: #999999;
            // text-decoration: line-through;
            .qishu {
              display: inline-block;
              width: 40px;
              white-space: nowrap;
              overflow: hidden;
              color: #333;
              text-overflow: ellipsis;
              div {
                width: 40px;
                white-space: nowrap;
                overflow: hidden;
                color: #333;
                text-overflow: ellipsis;
              }
            }
          }
        }
        p {
          position: relative;
          top: 4px;
          margin-left: 10px;
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
        .tips {
          position: relative;
          top: -22px;
          width: 88px;
          height: 28px;
          background: #e8fbf6;
          border-radius: 14px 4px 14px 4px;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          color: #08a579;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .zx {
          display: flex;
          flex-direction: column;
          margin-right: 60px;
          cursor: pointer;
          img {
            margin-bottom: 10px;
            width: 28px;
          }
          span {
            font-size: 14px;
            color: #08a579;
          }
        }
        .gm {
          width: 320px;
          height: 80px;
          background: #08a579;
          border-radius: 10px;
          font-size: 24px;
          color: #fff;
          line-height: 80px;
          text-align: center;
          cursor: pointer;
        }
        .gm:active {
          opacity: 0.8;
        }
      }
    }
  }
  .dytc {
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    .dySuccess {
      .top {
        width: 1000px;
        height: 240px;
        background-image: url("../../assets/img/activeNew/tcbg_1000.png");
        background-size: 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        h4 {
          margin: 50px auto;
          margin-bottom: 30px;
          text-align: center;
          font-size: 20px;
          color: #ffffff;
          line-height: 34px;
        }
        .jindu {
          display: flex;
          margin-left: 210px;
          // align-items: center;
          .first {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            left: 0px;
            top: 18px;
            img {
              width: 20px;
              height: 20px;
            }
            p {
              font-size: 16px;
              opacity: 0.9;
              font-weight: normal;
              color: #fff;
            }
            p:first-of-type {
              margin-top: 28px;
            }
          }
          .lianjie1 {
            position: relative;
            left: -32px;
            top: 26px;
            width: 200px;
            height: 3px;
          }
          .lianjie2 {
            position: relative;
            left: -126px;
            top: 26px;
            width: 200px;
            height: 3px;
          }
          .second {
            position: relative;
            left: -80px;
            top: 0px;
            img {
              width: 52px;
              height: 52px;
            }
            p {
              font-size: 16px;
              color: #fff;
              font-weight: bold;
            }
            p:first-of-type {
              margin-top: 10px;
            }
          }
          .third {
            position: relative;
            left: -198px;
            top: 18px;
            img {
              width: 20px;
              height: 20px;
            }
            p {
              font-size: 16px;
              opacity: 0.9;
              font-weight: normal;
            }
            p:first-of-type {
              margin-top: 18px;
            }
          }
        }
      }
      .dyContent {
        width: 1000px;
        overflow: hidden;
        .tips {
          margin-top: 50px;
          text-align: center;
          color: #333333;
          font-size: 20px;
          line-height: 38px;
          p {
            display: inline-block;
            text-align: center;
          }
          span {
            font-weight: bold;
          }
          .kaipiao {
            display: inline-block;
            line-height: 38px;
            width: 120px;
            height: 36px;
            border: 1px solid #08a579;
            border-radius: 18px;
            color: #08a579;
            cursor: pointer;
            user-select: none;
            img {
              position: relative;
              top: 2px;
              margin-left: 5px;
            }
          }
        }
        .pic {
          margin: 0 auto;
          margin-top: 30px;
          width: 150px;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          margin-top: 23px;
          text-align: center;
          font-size: 20px;
          color: #333;
        }
        .ytj {
          margin: 0 auto;
          margin-top: 34px;
          margin-bottom: 50px;
          text-align: center;
          line-height: 60px;
          width: 400px;
          height: 60px;
          background: #08a579;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
          color: #fff;
          font-size: 24px;
          cursor: pointer;
          user-select: none;
        }
        .ytj:active {
          opacity: 0.8;
        }
      }
    }
  }
  .dzxy {
    /deep/.el-dialog {
      border-radius: 20px;
      min-height: 300px;
      overflow: hidden;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    .xieyi {
      margin: 0 auto;
      width: 900px;
    }
    h3 {
      margin-top: 30px;
      text-align: center;
      font-size: 16px;
    }
  }
  .yuyue {
    overflow: hidden;
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    .top {
      width: 600px;
      height: 120px;
    }
  }
  .yuyue2 {
    .content {
      width: 600px;
      .title {
        padding: 15px 0;
        h4 {
          text-align: center;
          font-size: 20px;
          color: #333;
          line-height: 40px;
          span {
            color: #f25555;
          }
        }
      }
      .pic {
        margin: 0 auto;
        margin-bottom: 20px;
        width: 200px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin-bottom: 30px;
        text-align: center;
        color: #969799;
        font-size: 14px;
      }
    }
  }
  .yuyue3 {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 600px;
      user-select: none;
      img {
        margin-top: 40px;
        width: 184px;
        height: 121px;
      }
      h4 {
        margin-top: 20px;
        font-size: 20px;
        color: #333;
      }
      p {
        margin-top: 15px;
        font-size: 16px;
        color: #969799;
      }
      .getback {
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 50px;
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
        width: 140px;
        height: 36px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
      }
      .getback:active {
        opacity: 0.8;
      }
    }
  }
  .duihuanBoxzf {
    text-align: center;
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0 20px;
    }
    /deep/.el-dialog__header {
      padding-top: 10px;
    }
    h2 {
      margin-bottom: 40px;
      text-align: center;
      font-size: 18px;
      color: #333;
    }
    img {
      margin-bottom: 20px;
      width: 180px;
    }
  }
  .loginBox {
    /deep/.el-dialog {
      border-radius: 20px;
      overflow: hidden;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      margin-right: 10px;
      color: #c0c1c5;
      font-size: 18px;
      font-weight: 600;
    }
    /deep/.el-dialog__headerbtn {
      right: 36px;
    }
    .login {
      text-align: center;
      .tcTop {
        margin-bottom: 32px;
        text-align: center;
      }
      .dlevm {
        margin: 0 auto;
        text-align: center;
        width: 240px;
        height: 240px;
        img {
          width: 240px;
          height: 240px;
        }
      }
      p {
        margin-top: 16px;
        margin-bottom: 35px;
        text-align: center;
        font-size: 14px;
        color: #666;
      }
      .gologin {
        margin: 0 auto;
        text-align: center;
        width: 400px;
        height: 60px;
        line-height: 60px;
        color: #333;
        font-size: 16px;
        background: rgba(242, 237, 237, 0);
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        cursor: pointer;
      }
    }
  }
  .dddzTc {
    /deep/.el-dialog__headerbtn .el-dialog__close:hover {
      color: #08a579;
    }
    .chose {
      position: relative;
      margin-left: 30px;
      cursor: pointer;
      h3 {
        // margin: 10px 0;
        margin: 0 30px 30px 0;
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .tips{
        margin-bottom: 20px;
        color: #969699;
        font-size: 12px;
      }
      .el-form {
        width: 400px;
        user-select: none;
      }
      .el-input {
        width: 400px;
      }
      .el-select {
        width: 400px;
      }
      /deep/.el-form-item__content {
        margin-left: 40px;
      }
      /deep/.el-form-item__label {
        text-align: left;
        padding-right: 0;
      }
      /deep/.el-cascader .el-input {
        width: 400px;
      }
      /deep/.el-form-item__label{
        line-height: 40px;
      }
      .indput {
        position: relative;
      }
      input {
        padding-left: 15px;
        color: #666;
        width: 320px;
        height: 40px;
        border: 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        background: #fff;
        cursor: pointer;
      }
      .jiantou {
        position: absolute;
        top: 14px;
        right: 0px;
        color: #999;
        font-size: 15px;
      }
      .adreess {
        position: relative;
        .select_color {
          color: #08a579;
          font-weight: 600;
          i {
            color: #08a579;
          }
        }
        // .icon_style {
        //   transform: rotate(180deg);
        // }
        .adreessBox {
          display: flex;
          position: absolute;
          top: 40px;
          left: 0;
          z-index: 1000;
          background-color: #fff;
          box-shadow: 0px 0px 20px 4px #ccc;
          border-radius: 4px;
          transition: 1s;
          .box {
            margin-top: 10px;
            padding: 0px 15px 10px 40px;
            width: 170px;
            height: 250px;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            overflow-y: scroll;
            .list {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              cursor: pointer;
            }
          }
          .preBox {
            border-right: 1px solid #ccc;
          }
          .cityBox {
            border-right: 1px solid #ccc;
          }
          ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
      }
      p {
        margin: 20px 0;
        margin-bottom: 20px;
        color: #646566;
      }
      
    }
    /deep/.el-dialog--center {
      border-radius: 10px;
      padding-bottom: 0px;
    }
    /deep/.el-dialog__header {
      padding: 0;
      padding-top: 20px;
    }
    .goodsinfo{
      .goodsBox{
        display: flex;
        position: relative;
        .left{
          img{
            width: 160px;
            height: 80px;
          }
        }
        .right{
          margin-left: 10px;
          h3{
            margin-bottom: 8px;
            font-size: 16px;
            color: #333333;
          }
          span{
            
            color: #999999;
            font-size: 12px;
          }
          h6{
            position: absolute;
            bottom: 2px;
            font-size: 12px;
            color: #999999;
            font-weight: normal;
          }
          .price{
            position: absolute;
            right: 34px;
            text-align: right;
            h4{
              color: #F6444E;
              font-size: 16px;
            }
            span{
              text-decoration: line-through;
              font-size: 12px;
              color: #999999;
            }
          }
        }
      }
    }
    .submitSet {
        margin-left: 160px;
        margin-top: 50px;
        width: 120px;
        height: 40px;
        background: #08a579;
        color: #fff;
        border-radius: 6px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
  }
}
</style>
